<!-- FileUploadDialog.vue -->
<template>
  <!-- 对话框遮罩层 -->
  <div v-if="dialogVisible" class="dialog-mask" @click="handleMaskClick">
    <!-- 对话框主体 -->
    <div class="file-upload-dialog" @click.stop>
      <!-- 对话框头部 -->
      <div class="dialog-header">
        <h3 class="dialog-title">文件上传</h3>
        <button class="close-btn" @click="closeDialog">×</button>
      </div>

      <div class="tab-header">
        <div
            :class="{ active: activeTab === 'file' }"
            class="tab-item"
            @click="activeTab = 'file'">
          本地文件
        </div>
        <div
            :class="{ active: activeTab === 'url' }"
            class="tab-item"
            @click="activeTab = 'url'">
          URL上传
        </div>
      </div>


      <!-- Tab内容区域 -->
      <div class="tab-content">
        <!-- 第一个Tab：本地文件上传 -->
        <div v-if="activeTab === 'file'" class="tab-panel">
          <FileUpload
              ref="fileUploadRef"
              @upload-success="handleUploadSuccess"
              @upload-error="handleUploadError"
          />
        </div>

        <!-- 第二个Tab：URL上传 -->
        <div v-if="activeTab === 'url'" class="tab-panel">
          <url-uploader
              @upload-success="handleUploadSuccess"
          />
        </div>

      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, defineExpose, defineEmits, watch} from 'vue'
import FileUpload from '../FileUploader.vue'
import {
  dragLeave,
  dragOver,
  handleDropFile,
  handleFileSelect,
  isDragging, selectedFile, uploading
} from "@/views/documentManager/components/ts/uploadFile";
import {formatFileSize} from "@/views/documentManager/components/ts/FileBrowser";
import UrlUploader from "@/views/documentManager/components/Dialog/urlUploader.vue";

// 定义事件
const emit = defineEmits(['update:dialogVisible', 'uploadFile']);
// Tab相关状态
const activeTab = ref<'file' | 'url'>('file');


// 响应式数据
// 定义props和emit
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  }
})
const fileUploadRef = ref<InstanceType<typeof FileUpload>>()

// 关闭对话框
const closeDialog = () => {
  emit('update:dialogVisible', false)
}

// 点击遮罩层关闭对话框
const handleMaskClick = () => {
  closeDialog()
}
// 上传成功处理
const handleUploadSuccess = (fileName: string) => {
  emit('uploadFile')
}

// 上传错误处理
const handleUploadError = (error: any) => {

}

// 暴露方法给父组件
defineExpose({
  closeDialog
})
</script>

<style scoped>
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.file-upload-dialog {
  width: 90%;
  max-width: 700px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  animation: slideUp 0.3s ease;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e8e8e8;
  background: #fafafa;
}

.dialog-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #909399;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.close-btn:hover {
  background-color: #f5f5f5;
  color: #606266;
}

.dialog-content {
  padding: 0;
  max-height: 70vh;
  overflow-y: auto;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .file-upload-dialog {
    width: 95%;
    margin: 20px;
  }

  .dialog-header, .dialog-footer {
    padding: 16px 20px;
  }
}

.tab-header {
  display: flex;
  border-bottom: 2px solid #e0e0e0;
}

.tab-item {
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  font-size: 14px;
  color: #666;
}

.tab-item:hover {
  color: #4CAF50;
}

.tab-item.active {
  color: #4CAF50;
  border-bottom-color: #4CAF50;
  font-weight: 500;
}

.tab-panel {
  animation: fadeIn 0.3s ease;
}

.tab-content {
  margin-top: 16px;
}


</style>